import { Button, Card, List, Modal } from "antd";
import { ConfigDefList } from "./config";

export interface SelectParamModalProps {
    paramIdList: string[];
    onCancel: () => void;
    onSelect: (paramId: string, paramValue: unknown) => void;
}

export default function SelectParamModal(props: SelectParamModalProps) {
    return (
        <Modal title="选择参数" open bodyStyle={{ height: "calc(100vh - 300px)", overflowY: "auto" }} footer={null}
        onCancel={e=>{
            e.stopPropagation();
            e.preventDefault();
            props.onCancel();
        }}>
            <List rowKey="id" dataSource={ConfigDefList.filter(item => !props.paramIdList.includes(item.id))}
                renderItem={cfgDef => (
                    <List.Item key={cfgDef.id}>
                        <Card title={cfgDef.id} style={{ width: "100%" }} bordered={false} extra={
                            <Button type="link" onClick={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                props.onSelect(cfgDef.id, cfgDef.defaultValue);
                            }}>
                                增加到配置
                            </Button>
                        }>
                            <p>{cfgDef.descCn}</p>
                            <p>{cfgDef.descEn}</p>
                        </Card>
                    </List.Item>
                )} />
        </Modal>
    )
}
